<template>
  <div class="goods-box">
    <el-row type="flex">
      <el-col :span="12">
        <span class="goods-box__title">
          {{ title }}
        </span>
      </el-col>
      <el-col v-show="editor" :span="12" style="text-align: right;">
      </el-col>
    </el-row>
    <div class="goods-list">
      <el-row :gutter="10" class="list-header">
        <el-col :span="share ? 20 : editor ? 10 : 12">
          <div class="item-goods">商品</div>
        </el-col>
        <el-col :span="3" v-if="false">
          <div class="item-type">商品类型</div>
        </el-col>
        <el-col v-if="!share" :span="4">
          <div class="item-price">价格</div>
        </el-col>
        <el-col :span="4">
          <div class="item-number">数量</div>
        </el-col>
        <el-col v-if="!share" :span="4">
          <div class="item-count-price">小计</div>
        </el-col>
        <el-col v-if="editor" :span="2">
          <div class="item-options">操作</div>
        </el-col>
      </el-row>
      <template v-if="goodsList.length">
        <div class="list-box" v-for="item in goodsList" :key="item.id"
          :style="{ marginTop: item.shopSkuSellVoLists ? 0 : '20px' }">
          <template v-if="item.shopSkuSellVoLists">
            <el-row>
              <el-col :span="24">
                <div class="shop">
                  <div class="shop-opt" v-show="editor"><el-checkbox v-model="item.isSelect"
                      :indeterminate="item.isIndeterminate" size="large" true-value="Y" false-value="N"
                      @change="bindItemSelectAll($event, item)" />
                  </div>
                  <div class="shop-img"><el-avatar shape="square" :size="22" :src="item.shopPic" /></div>
                  <div class="shop-title">{{ item.shopName }}</div>
                </div>
              </el-col>
            </el-row>
            <shopping-cart-goods v-for="sku in item.shopSkuSellVoLists" :parent-item="item" :key="sku.id" :item="sku"
              :editor="editor" :share="share"></shopping-cart-goods>
          </template>
          <shopping-cart-goods v-else :item="item" :editor="editor" :share="share"></shopping-cart-goods>
        </div>
      </template>
      <el-empty v-else-if="!goodsList.length" description="暂无数据" />
    </div>
  </div>
</template>

<script setup name="shoppingCartGoodsList">
import shoppingCartGoods from './shoppingCartGoods.vue';
import useShoppingCartStore from '@/components/webCustom/shoppingCart'
const props = defineProps({
  goodsList: {
    type: Array,
    default: () => []
  },
  editor: Boolean,
  share: Boolean,
  count: {
    type: Number,
    default: 0
  },
  title: {
    type: String,
    default: '全部商品'
  },
})
const shoppingCart = useShoppingCartStore()
const state = reactive({})
const title = computed(() => {
  return `${props.title}${props.editor ? `(${props.count})` : ''}`
})
const bindItemSelectAll = (event, item) => {
  console.log(event, item)
  item.isIndeterminate = false
  shoppingCart.selectGoods({ ids: item.shopSkuSellVoLists.map(it => it.id).join(), type: event === 'Y' ? '2' : '1' }).then(res => {
    item.shopSkuSellVoLists.forEach(sku => {
      sku.isSelect = event
    })
  }).catch((err) => {
    item.isSelect = event === 'Y' ? 'N' : 'Y'
    console.log(err)
  })
}
</script>

<style lang="scss" scoped>
.goods-box {
  &__title {
    font-weight: bold;
    font-size: 22px;
    color: var(--jbc-font-color);
    line-height: 30px;
  }

  .goods-list {
    margin-top: 20px;

    .list-header {
      background: #F8F8F8;
      border-radius: 8px;

      .item-goods,
      .item-type,
      .item-price,
      .item-number,
      .item-count-price,
      .item-options {
        font-weight: bold;
        font-size: var(--jbc-font-size-medium);
        color: var(--jbc-font-color);
        line-height: 22px;
        padding: 16px 0;
      }

      .item-goods {
        padding-left: 54px;
      }

      .item-type,
      .item-price,
      .item-number,
      .item-count-price,
      .item-options {
        text-align: center;

      }
    }
  }

  .shop {
    display: flex;
    align-items: center;
    height: 54px;
    padding: 0 19px;

    .shop-opt {
      width: 24px;
      margin-right: 14px;
    }

    .shop-img {
      width: 22px;
      margin-right: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .shop-title {
      flex: 1;
      font-weight: bold;
      font-size: var(--jbc-font-size-extra-large);
      color: var(--jbc-font-color);
      line-height: 27px;
    }

    :deep(.el-checkbox.el-checkbox--large) {
      --el-checkbox-checked-bg-color: var(--jbc-color);
      --el-checkbox-checked-input-border-color: var(--jbc-color);

      & .el-checkbox__input {
        .el-checkbox__inner {
          width: 22px;
          height: 22px;

          &:after {
            height: 10px;
            left: 8px;
            top: 3px;
            width: 4px;
          }
        }

        &.is-indeterminate .el-checkbox__inner {
          &:before {
            top: 10px;
          }
        }
      }
    }
  }
}
</style>